<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客服消息</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-cyan-600 to-teal-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="home-b2c.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">客服消息</h1>
                <i class="fas fa-cog text-lg"></i>
            </div>
        </div>

        <!-- Stats Bar -->
        <div class="px-4 py-3 bg-gradient-to-r from-cyan-600 to-teal-600">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-3">
                <div class="grid grid-cols-4 gap-2 text-white text-center">
                    <div>
                        <p class="text-lg font-bold">12</p>
                        <p class="text-xs opacity-80">待回复</p>
                    </div>
                    <div>
                        <p class="text-lg font-bold">3</p>
                        <p class="text-xs opacity-80">处理中</p>
                    </div>
                    <div>
                        <p class="text-lg font-bold">98.5%</p>
                        <p class="text-xs opacity-80">满意度</p>
                    </div>
                    <div>
                        <p class="text-lg font-bold">2min</p>
                        <p class="text-xs opacity-80">响应时间</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab Navigation -->
        <div class="px-4 py-2 bg-white border-b border-gray-200">
            <div class="flex space-x-4">
                <button class="pb-2 border-b-2 border-cyan-600 text-cyan-600 font-medium text-sm">
                    全部消息(15)
                </button>
                <button class="pb-2 text-gray-500 text-sm">
                    待回复(12)
                </button>
                <button class="pb-2 text-gray-500 text-sm">
                    处理中(3)
                </button>
                <button class="pb-2 text-gray-500 text-sm">
                    已解决
                </button>
            </div>
        </div>

        <!-- Message List -->
        <div class="h-[calc(852px-250px)] overflow-y-auto pb-24">
            <!-- Message Item 1 - New -->
            <div class="bg-white border-b border-gray-100">
                <div class="px-4 py-3 flex items-start">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=50&h=50&fit=crop" 
                             alt="用户头像" class="w-12 h-12 rounded-full object-cover">
                        <span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></span>
                    </div>
                    <div class="flex-1 ml-3">
                        <div class="flex items-center justify-between mb-1">
                            <div class="flex items-center">
                                <p class="text-sm font-medium">李小姐</p>
                                <span class="ml-2 bg-orange-100 text-orange-600 text-xs px-2 py-0.5 rounded">待回复</span>
                            </div>
                            <span class="text-xs text-gray-400">2分钟前</span>
                        </div>
                        <p class="text-sm text-gray-700 mb-1">您好，请问这个商品有现货吗？</p>
                        <div class="flex items-center text-xs text-gray-500">
                            <i class="fas fa-box mr-1"></i>
                            <span>关于: 无线蓝牙耳机 Pro Max</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Message Item 2 - Processing -->
            <div class="bg-white border-b border-gray-100">
                <div class="px-4 py-3 flex items-start">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=50&h=50&fit=crop" 
                             alt="用户头像" class="w-12 h-12 rounded-full object-cover">
                        <span class="absolute -top-1 -right-1 w-3 h-3 bg-yellow-500 rounded-full border-2 border-white"></span>
                    </div>
                    <div class="flex-1 ml-3">
                        <div class="flex items-center justify-between mb-1">
                            <div class="flex items-center">
                                <p class="text-sm font-medium">王先生</p>
                                <span class="ml-2 bg-blue-100 text-blue-600 text-xs px-2 py-0.5 rounded">处理中</span>
                            </div>
                            <span class="text-xs text-gray-400">15分钟前</span>
                        </div>
                        <p class="text-sm text-gray-700 mb-1">订单已经发货两天了，还没收到</p>
                        <div class="flex items-center text-xs text-gray-500">
                            <i class="fas fa-clipboard-list mr-1"></i>
                            <span>订单号: 202501050001</span>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-2 mt-2">
                            <p class="text-xs text-gray-600">
                                <span class="text-cyan-600 font-medium">客服回复:</span> 
                                您好，我正在为您查询物流信息...
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Message Item 3 -->
            <div class="bg-white border-b border-gray-100">
                <div class="px-4 py-3 flex items-start">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=50&h=50&fit=crop" 
                             alt="用户头像" class="w-12 h-12 rounded-full object-cover">
                        <span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></span>
                    </div>
                    <div class="flex-1 ml-3">
                        <div class="flex items-center justify-between mb-1">
                            <div class="flex items-center">
                                <p class="text-sm font-medium">张女士</p>
                                <span class="ml-2 bg-orange-100 text-orange-600 text-xs px-2 py-0.5 rounded">待回复</span>
                            </div>
                            <span class="text-xs text-gray-400">30分钟前</span>
                        </div>
                        <p class="text-sm text-gray-700 mb-1">可以开发票吗？需要公司抬头的</p>
                        <div class="flex items-center text-xs text-gray-500">
                            <i class="fas fa-question-circle mr-1"></i>
                            <span>售前咨询</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Message Item 4 - Resolved -->
            <div class="bg-white border-b border-gray-100 opacity-75">
                <div class="px-4 py-3 flex items-start">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=50&h=50&fit=crop" 
                             alt="用户头像" class="w-12 h-12 rounded-full object-cover">
                    </div>
                    <div class="flex-1 ml-3">
                        <div class="flex items-center justify-between mb-1">
                            <div class="flex items-center">
                                <p class="text-sm font-medium">刘先生</p>
                                <span class="ml-2 bg-green-100 text-green-600 text-xs px-2 py-0.5 rounded">已解决</span>
                            </div>
                            <span class="text-xs text-gray-400">1小时前</span>
                        </div>
                        <p class="text-sm text-gray-700 mb-1">收到了，谢谢！</p>
                        <div class="flex items-center justify-between mt-2">
                            <div class="flex items-center text-xs text-gray-500">
                                <i class="fas fa-star text-yellow-500 mr-1"></i>
                                <span>非常满意</span>
                            </div>
                            <button class="text-xs text-gray-400">查看详情</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Reply Section -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-cyan-600 mr-2 rounded-full"></span>
                    快捷回复
                </h3>
                <div class="grid grid-cols-2 gap-2">
                    <button class="bg-gray-100 text-sm py-2.5 px-3 rounded-lg text-left hover:bg-gray-200 transition-colors border border-gray-200">
                        <i class="fas fa-clock text-cyan-600 mr-2"></i>
                        正在为您查询...
                    </button>
                    <button class="bg-gray-100 text-sm py-2.5 px-3 rounded-lg text-left hover:bg-gray-200 transition-colors border border-gray-200">
                        <i class="fas fa-check text-green-600 mr-2"></i>
                        好的，马上处理
                    </button>
                    <button class="bg-gray-100 text-sm py-2.5 px-3 rounded-lg text-left hover:bg-gray-200 transition-colors border border-gray-200">
                        <i class="fas fa-truck text-blue-600 mr-2"></i>
                        已安排发货
                    </button>
                    <button class="bg-gray-100 text-sm py-2.5 px-3 rounded-lg text-left hover:bg-gray-200 transition-colors border border-gray-200">
                        <i class="fas fa-phone text-purple-600 mr-2"></i>
                        请提供联系方式
                    </button>
                </div>
            </div>

            <!-- AI Assistant -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-cyan-600 mr-2 rounded-full"></span>
                    AI智能助手
                </h3>
                <div class="bg-gradient-to-r from-cyan-50 to-teal-50 rounded-xl p-4 border border-cyan-200">
                    <div class="flex items-center justify-between mb-3">
                        <div>
                            <p class="text-sm font-semibold">智能客服已开启</p>
                            <p class="text-xs text-gray-600 mt-1">自动回复常见问题</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" checked class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:bg-cyan-600 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
                        </label>
                    </div>
                    <div class="grid grid-cols-2 gap-3 text-center">
                        <div>
                            <p class="text-lg font-bold text-cyan-600">156</p>
                            <p class="text-xs text-gray-600">今日处理</p>
                        </div>
                        <div>
                            <p class="text-lg font-bold text-cyan-600">92%</p>
                            <p class="text-xs text-gray-600">解决率</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Customer Service Tools -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-cyan-600 mr-2 rounded-full"></span>
                    客服工具
                </h3>
                <div class="grid grid-cols-3 gap-3">
                    <div class="text-center">
                        <div class="w-14 h-14 mx-auto bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white mb-2 shadow-lg">
                            <i class="fas fa-robot text-xl"></i>
                        </div>
                        <p class="text-xs text-gray-700">机器人设置</p>
                    </div>
                    <div class="text-center">
                        <div class="w-14 h-14 mx-auto bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center text-white mb-2 shadow-lg">
                            <i class="fas fa-comment-medical text-xl"></i>
                        </div>
                        <p class="text-xs text-gray-700">话术库</p>
                    </div>
                    <div class="text-center">
                        <div class="w-14 h-14 mx-auto bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center text-white mb-2 shadow-lg">
                            <i class="fas fa-chart-bar text-xl"></i>
                        </div>
                        <p class="text-xs text-gray-700">服务统计</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>